import Taro, { Component } from '@tarojs/taro'
import { View , Text , Image} from '@tarojs/components';
import { baseImgSrc } from '../../util/base_url';
import { AtRate , AtButton } from 'taro-ui';
import { getDriverList , inviteAcOrder } from '../../util/api';
import NoData from '../../components/nodata/nodata';
import { diffId } from '../../util/util';
import './usercarlist.scss';
export default class UserCarList extends Component{
    static options = {
        addGlobalClass: true
    }
    constructor(){
        super(...arguments);
        this.state  = {
            type:0, //0全部1出发地最近2目的地最近
            list:[],
            total:0,
            nodataShow:false,
        }
    }
    componentWillMount(){
        this.getList();
        Taro.eventCenter.on('successPay',() => {
            this.refreshList();
        })
        Taro.eventCenter.on('refreshList',() => {
            this.refreshList();
        })
        Taro.eventCenter.on('refreTabList',() => {
            this.refreshList();
        })
        Taro.eventCenter.on('loopRefresh',() => {
            this.loopRefresh();
        })
    }
    changeItem(type){
        this.setState({type,list:[],total:0},() => {
            this.getList()
        })
    }
    loopRefresh(){
        let { type , list } = this.state;
        getDriverList({type},true).then( res => {
            wx.stopPullDownRefresh()
            if(res.data && Array.isArray(res.data)){
                if(diffId(res.data,list).status){
                    this.setState({list:res.data},() => {
                        this.setState({listDataShow:this.state.list.length == 0})
                    });
                }
            }
        })
    }
    getList(){
        let { type } = this.state;
        getDriverList({type},true).then(res => { 
            wx.stopPullDownRefresh()
            if(res.code == 0){
                this.setState({list:res.data},() => {
                    this.setState({nodataShow:this.state.list.length == 0})
                })
            }else{
                this.setState({nodataShow:this.state.list.length == 0})
            }
        })
    }
    refreshList(){
        this.setState({list:[]},() => {
            this.getList();
        })
    }
    inviteOrder(id){ //邀请截单
        Taro.showModal({
            title:"提示",
            content:"确认邀请对方接单吗"
        }).then( res => {
            if(res.confirm){
                inviteAcOrder({user_id:id}).then( res => {
                    if(res.code == 0 ){
                        Taro.showToast({title:res.msg});
                    }else{
                        Taro.showToast({title:res.msg,icon:"none"});
                    }
                 })
            }
        })
    }
    toDtlPage(id){
        Taro.navigateTo({
            url:`/pages/driverorderdtl/driverorderdtl?id=${id}`,
        })
    }
    render(){
        let { type , list , nodataShow} = this.state;
        return (
            <View className='usercar'>
                <View className='tab-list flex align-items space-between'>
                    <View className={`item fn-ctr ${type == 0 ? 'active' : ''}`} onClick={this.changeItem.bind(this,0)}>
                        <Text className='txt'>全部</Text>
                        <View className='line'></View>
                    </View> 
                    <View className={`item fn-ctr ${type == 1 ? 'active' : ''}`} onClick={this.changeItem.bind(this,1)}>
                        <Text className='txt'>出发地最近</Text>
                        <View className='line'></View>
                    </View>
                    <View className={`item fn-ctr ${type == 2 ? 'active' : ''}`} onClick={this.changeItem.bind(this,2)}>
                        <Text className='txt'>目的地最近</Text>
                        <View className='line'></View>
                    </View>
                </View>
                <View className='list'>
                        {
                            list.map((v,i) => (
                                <View className='info-card'>
                                    <View className='user flex align-items space-between' onClick={this.toDtlPage.bind(this,v.id)}>
                                        <Image className='heading' src={v.headimg} />
                                        <View className='right flex1 flex align-content-between flex-wrap'>
                                            <View className='top flex align-items flex-start'>
                                                <Text className='top-txt'>{v.nickname}</Text>
                                                <View className='yanzheng fn-ctr'>已通过人脸识别</View>
                                            </View>
                                            <View className='top flex align-items space-between'>
                                                <AtRate value={5} size={15} margin={15} />
                                                <Text className='dance-taxt free-num'>已接单{v.counts}次</Text>
                                            </View>
                                        </View>
                                    </View>
                                    <View className='time flex align-items flex-start' onClick={this.toDtlPage.bind(this,v.id)}>
                                        <Image className='time-pic' src={`${baseImgSrc}/index_time.png`} />
                                        <Text className='time-txt'>{v.start_time} 出发</Text>
                                    </View>
                                    <View className='address-info flex align-items space-between' onClick={this.toDtlPage.bind(this,v.id)}>
                                        <View className='left'>
                                            <Image className='left-pic' src={`${baseImgSrc}/fa_dao.png`} />
                                        </View>
                                        <View className='right flex1 flex flex-wrap align-content-between'>
                                            <View className='right-top flex align-items space-between'>
                                                <View className='right-address ell1'>{v.address}</View>
                                                <Text className='dance-taxt'>{v.start}</Text>
                                            </View>
                                            <View className='right-bottom flex align-items space-between'>
                                                <View class='right-address ell1'>{v.go_address}</View>
                                                <Text className='dance-taxt'>{v.end}</Text>
                                            </View>
                                        </View>
                                    </View>
                                    <AtButton className='invi-btn' type='primary' size='normal' onClick={this.inviteOrder.bind(this,v.user_id)}>邀请接单</AtButton>
                                </View>
                            )) 
                        }
                    <NoData  needShow={nodataShow} pic={'/no_carer.png'} noDataTxt={'暂无司机'} size={'small'}  />
                </View>
            </View>
        )
    }
}